<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/5 xl:w-1/6" @select="handleSelect" />
    <div class="content-box">
    <CommonDateSearch ref="searchRef" :immediate="false" @search="handleSearch"></CommonDateSearch>
      <div class="chart-list">
        <div class=" line">
          <Line :searchInfo="searchInfo" ref="chartRef"></Line>
        </div>
        <div class="container_down">
          <div class=" bar">
            <Bar ref="barRef"></Bar>
          </div>
          <div class=" pie-box">
            <Pie ref="pieRef"></Pie>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts"
  setup>
  import { reactive, ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import DeptTree from './DeptTree.vue';
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'

  import Line from "./Line.vue";
  import Bar from "./Bar.vue";
  import Pie from "./Pie.vue";

  defineOptions({ name: 'Deviceanagement' });//名字

  let chartRef = ref();
  let pieRef = ref();
  let barRef = ref();
  let searchRef = ref();

  const searchInfo = reactive<Recordable>({});

  const handleSearch = (params) => {//组件自定义方法，拿到数据
    console.log(params);
    
    Object.assign(searchInfo, params)
    refreshData(searchInfo);
  }

  function handleSelect(classifyId = '') {
    console.log(classifyId,"classifyId");
    searchInfo.classifyId = classifyId;
    searchRef.value.handleSearch();
  }

  function refreshData(searchInfo) {
    // 数据环比
    chartRef.value.getData(searchInfo)
    // 数据同比
    barRef.value.getData(searchInfo)
    // 数据占比
    pieRef.value.getData(searchInfo)

  }

</script>
<style scoped
  lang="less">
  .content-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
  }

  .chart-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 4px;
    overflow: auto;
    background: #fff;

    .line,
    .bar,
    .pie-box {
      flex: 1;
      overflow: hidden;



      .chart-box {
        height: 100%;
        padding: 4px;
        overflow: hidden;
      }

    }

    .line,
    .container_down {
      min-height: 340px;
    }

    .container_down {
      display: flex;
      flex: 1;
    }
  }
</style>
